<template>
    <div>
        <div>
            <el-button type="primary" size="small" @click="create">新增</el-button>
        </div>
        <el-table :data="list" style="width: 100%;margin-bottom: 20px;margin-top:10px;" row-key="id" border :default-expand-all="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="flag" label="标识">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加菜单" :visible.sync="showModal">
            <el-form :model="form">
                <el-form-item label="上级功能" :label-width="formLabelWidth">
                    <el-select ref="treeSelect" v-model="form.parent_name" placeholder="请选择上级功能" style="width:100%" clearable>
                        <el-option :value="form.pid" :label="form.parent_name" style="height: auto" hidden/>
                            <el-tree
                            ref="tree"
                            :data="list"
                            node-key="id"
                            :props="{label: 'name', children: 'children'}"
                            :default-checked-keys="[form.pid]"
                            @node-click="selectPid"
                            :highlight-current="showTree"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="功能名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="功能标识" :label-width="formLabelWidth">
                    <el-input v-model="form.flag" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showModal = false">取 消</el-button>
                <el-button type="primary" @click="submit" :loading="lock">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import authMenus from '@/api/setting/auth-menus'

export default {
    name: "Index",
    data() {
        return {
            hasChildren: true,
            list: [],
            act: "create",
            showModal: false,
            title: "添加菜单",
            formLabelWidth: '180',
            showTree: false,
            lock: false,
            form: {
                id: 0,
                pid: 0,
                parent_name: '',
                name: "",
                flag: "",
            }
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            var res = await authMenus.getList({ page: 1 });
            this.list = res.data.list;
        },
        create() {
            this.act = "create";
            this.title = "添加菜单";
            this.showModal = true;
            this.form = {
                id: 0,
                pid: 0,
                parent_name: '',
                name: "",
                flag: "",
            };
        },
        edit(index, row) {
            for (let k in this.form) {
                this.form[k] = row[k];
            }
            this.act = 'edit';
            this.title = "编辑菜单";
            this.showModal = true;
        },
        del(index, row) {
            this.$confirm('是否确认删除该功能?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await authMenus.delete({id: row.id});
                if (res.code === 0) {
                    this.$message.success(res.msg);
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                } 
            }).catch(() => {});
        },
        selectPid(data) {
            this.form.pid = data.id;
            this.form.parent_name = data.name;
            this.$refs.treeSelect.visible = false;
            this.showTree = true;
            this.$refs.tree.setCurrentKey(data.id)
        },
        async submit() {
            if (this.lock === true) {
                return false;
            }
            this.lock = true;
            let res;
            if (this.act === "create") {
                res = await authMenus.create(this.form);
            } else {
                res = await authMenus.modify(this.form);
            }
            this.lock = false;
            if (res.code === 0) {
                this.$message.success(res.msg);
                this.showModal = false;
                this.getList();
            } else {
                this.$message.error(res.msg);
            }
        }
    }
};
</script>
